谈谈你对 dns-prefetch 的理解

浏览器根据自定义的规则，提前去解析后面可能用到的域名，来加速网站的访问速度。简单来讲就是提前解析域名，以免延迟。

DNS Prefetching 是提前加载域名解析的，省去了解析时间,可帮助开发人员掩盖 DNS 解析延迟

<link rel="dns-prefetch" href="https://fonts.googleapis.com/">

首先，dns-prefetch 仅对跨域域上的 DNS 查找有效，因此请避免使用它来指向您的站点或域。这是因为，到浏览器看到提示时，您站点域背后的 IP 已经被解析。

html

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link rel="dns-prefetch" href="https://fonts.gstatic.com/" />

这个功能有个默认加载条件，所有的 a 标签的 href 都会自动去启用 DNS Prefetching，也就是说，你网页的 a 标签 href 带的域名，是不需要在 head 里面加上 link 手动设置的。但 a 标签的默认启动在 HTTPS 不起作用。

这时要使用 meta 里面 http-equiv 来强制启动功能。

preconnect

preconnect 会建立与服务器的连接，如果站点是通过 HTTPS 服务的，则此过程包括 DNS 解析，建立 TCP 连接以及执行 TLS 握手。将两者结合起来可提供进一步减少跨域请求的感知延迟的机会

添加这个属性，并且服务器允许跨域后，会得到精确的报错信息。

不加 crossorigin 以正常加载，无法准确捕获错误(只能捕获到:Script error.)